import React, { useRef, useEffect } from "react";
import {
    Modal,
    Form,
    Input,
    Select,
    Button,
    message
} from 'antd';
import { useMappedState, useDispatch, } from 'redux-react-hook';
import { set_addVisible } from '../../../../../store/action/house';
import api from "../../../../../api";

const AddAudit = (props: any) => {
    const state = useMappedState((state) => state.houseReducer);
    const dispatch = useDispatch();
    // 获取元素内容
    const form = useRef<any>(null);
    // 变量
    // 声明周期
    useEffect(() => {
        // 如果是编辑设置表单的值
        if (state.modalTitle === '编辑') {
            form.current.setFieldsValue(state.modalForm)
        } else if (state.modalTitle === '新增') {
            // 如果不是初始化表单
            form.current.resetFields()
        }
    }, [state]);
    // 方法
    // 点击确认
    const handleOk = () => {
        dispatch(set_addVisible(false));
    };
    // 点击取消
    const handleCancel = () => {
        dispatch(set_addVisible(false));
    };
    // 点击提交
    const onFinish = (values: any) => {
        // 判断当前是添加还是编辑
        if (state.modalTitle === '编辑') {
            let obj = Object.assign(state.modalForm, values);
            api.editAudit({
                ...obj
            }).then((res: any) => {
                if (res.success) {
                    // 关闭对话框
                    dispatch(set_addVisible(false));
                    message.success('编辑成功')
                    // 重新渲染页面
                    props.getAuditList()
                }
            })
        } else {

        }
    };
    return (
        <>
            <Modal title={state.modalTitle} visible={state.addVisible} onOk={handleOk} onCancel={handleCancel}
                cancelText="关闭"
                okText="确认"
            >
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    onFinish={onFinish}
                    ref={form}
                >
                    <Form.Item label="小区名称" name="plot"
                        rules={[{ required: true, message: '请输入小区名称!' }]}
                    >
                        <Input placeholder="请输入小区名称" />
                    </Form.Item>
                    <Form.Item label="标题" name="title"
                        rules={[{ required: true, message: '请输入标题!' }]}
                    >
                        <Input placeholder="请输入标题" />
                    </Form.Item>
                    <Form.Item label="面积" name="acreage"
                        rules={[{ required: true, message: '请输入面积!' }]}
                    >
                        <Input placeholder="请输入面积"
                            suffix="m²"
                        />
                    </Form.Item>
                    <Form.Item label="售价" name="price"
                        rules={[{ required: true, message: '请输入售价!' }]}
                    >
                        <Input placeholder="请输入售价"
                            suffix="万"
                        />
                    </Form.Item>
                    <Form.Item label="排序" name="sort"
                        rules={[{ required: true, message: '请输入排序!' }]}
                    >
                        <Input placeholder="请输入排序" />
                    </Form.Item>
                    <Form.Item label="区域" name="area"
                        rules={[{ required: true, message: '请输入区域!' }]}
                    >
                        <Input placeholder="请输入区域" />
                    </Form.Item>
                    <Form.Item label="状态" name="state"
                        rules={[{ required: true, message: '请选择状态!' }]}
                    >
                        <Select>
                            <Select.Option value="审核通过">审核通过</Select.Option>
                            <Select.Option value="审核不通过">审核不通过</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 20, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
};

export default AddAudit